<div class="max-w-sm rounded overflow-hidden shadow-lg mt-4 mx-4 sm:mx-auto">
  <img class="w-full" [src]="userInfo?.avatar || ''" />
  <div class="px-6 py-4">
    <div class="font-bold text-2xl mb-2 text-teal-500 capitalize">{{ userInfo?.name }}</div>
    <p class="text-gray-600 text-base">{{ userInfo?.email }}</p>
  </div>
</div>
